<template>
   <div class='map-nb' >
     <div v-for="item,i in areaData.child" :key="i" @click="NavToArea(item)"
      class='map-item' :style="areaStyle[item.areaName] ? areaStyle[item.areaName].style : 'display:none'">
       {{item.areaName}}<br />{{item.confirmedStuNum}}
     </div>
   </div>
</template>
<script>
export default {
  props: ['areaData'],
  data () {
    return {
      areaStyle: {
        '慈溪市' : {
          style: 'left: 94px; top: 20px;'
        },
        '镇海区' : {
          style: 'left: 211px; top: 80px;'
        },
        '江北区' : {
          style: 'left: 129px; top: 98px;'
        },
        '余姚市' : {
          style: 'left: 26px; top: 104px;'
        },
        '海曙区' : {
          style: 'left: 90px; top: 171px;'
        },
        '鄞州区' : {
          style: 'left: 207px; top: 195px;'
        },
        '北仑区' : {
          style: 'left: 282px; top: 153px;'
        },
        '奉化区' : {
          style: 'left: 102px; top: 250px;'
        },
        '宁海县' : {
          style: 'left: 117px; top: 347px;'
        },
        '象山县' : {
          style: 'left: 263px; top: 307px;'
        },
      }
    }
  },
  mounted () {
  },
  methods: {
    NavToArea(item){
      sessionStorage.setItem('statsCurrentArea', item.areaName)
      this.$router.push({ name: 'statsArea' })
    }
  }
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
.map-nb {
  width: 400px;
  height: 500px;
  background: url(../../assets/img/stats/map-nb.png);
  position: relative;
}
.map-item{
  position: absolute;
  height: 82px;
  width: 82px;
  border-radius: 50%;
  padding-top: 18px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: bold;
  line-height: 25px;
  text-align: center;
  cursor:pointer;
}
.map-item:hover{
  color: gold;
}
</style>
